<template>
  <div class="dialog">
    <p class="quick">手机快捷登录</p>
    <p class="created">未注册的手机号将自动创建账号</p>
    <div style="margin-top: 15px;" class="dialog_ipt">
      <el-input placeholder="请输入手机号码" v-model="input3" class="input-with-select">
        <el-button slot="append">
          <span class="obtain" v-if="show" @click="OnCode">获取验证码</span>
          <span v-else>{{ second }}s</span>
        </el-button>
      </el-input>
      <el-input v-model="input" placeholder="请输入验证码"></el-input>
    </div>
    <p class="btn" @click="Onenroll">登录</p>
  </div>
</template>
<script>
export default {
  inject: ["reload"],
  data() {
    return {
      dialogFormVisible: true,
      verifyCode: "",
      input3: "",
      input: "",
      show: true,
      timer: null,
      second: 60
    };
  },
  methods: {
    OnCode() {
      this.show = false;
      this.second = 60;
      this.timer = setInterval(() => {
        if (this.second > 0) {
          this.second--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
      this.instance
        .getVerifyCode({
          id: this.input3
        })
        .then(res => {
          this.$message({
            message: res.data.msg
          });
          if (res.data.code == 0) {
            this.verifyCode = res.data.data;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            this.second = 60;
          }
        })
        .catch(function(error) {});
    },
    Onenroll() {
      if (this.input3 != "" && this.input3.length == 11) {
        if (this.input == this.verifyCode && this.input != "") {
          this.instance
            .fastLogin({
              telephone: this.input3,
              verifyCode: this.input
            })
            .then(res => {
              if (res.data.code == 0) {
                this.$message({
                  message: "登录成功",
                  type: "success"
                });
                if (this.$route.path != "/pc_index") {
                  this.$router.push({
                    name: "pc_index"
                  });
                  this.reload();
                } else {
                }
                sessionStorage.setItem("token", res.data.data.token);
                sessionStorage.setItem("photo", this.input3);
                sessionStorage.setItem("userId", res.data.data.id);
                this.$emit("OndialogTable", false);
              }
            })
            .catch(function(error) {});
        } else {
          this.$message({
            message: "请输入正确的验证码"
          });
        }
      } else {
        this.$message({
          message: "请输入正确的手机号"
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.dialog {
  .quick {
    font-size: 20px;
    color: #343434;
  }
  .created {
    font-size: 16px;

    color: #c3beba;
    margin: 16px 0 27px 0;
  }
  .el-input-group {
    width: 367px;
  }
  .el-input {
    width: 367px;
    height: 53px;
    margin-bottom: 10px;
  }
  .el-dialog .el-input__inner,
  .el-dialog .el-textarea__inner {
    height: 53px !important;
  }
  .btn {
    cursor: pointer;
    width: 367px;
    height: 54px;
    background: #ef704a;
    border-radius: 4px;
    margin-top: 23px;
    text-align: center;
    line-height: 54px;
    font-size: 16px;
    color: #fff;
  }
  .el-input-group__append {
    background: #fff;
  }
  .obtain {
    font-size: 14px;

    color: #f0704a;
  }
}
</style>
<style>
.dialog_ipt > .el-input > .el-input__inner {
  height: 53px;
}
</style>
